<template>
  <div class="home">
    <el-row>
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark">
          <h3>分数💰: {{ $store.getters.score }}</h3>
        </div></el-col
      >
    </el-row>
    <el-row>
      <el-col :span="12"
        ><div class="grid-content bg-purple">
          <el-button type="primary" plain @click="init">初始化游戏🛠</el-button>
        </div></el-col
      >
      <el-col :span="12"
        ><div class="grid-content bg-purple-light">
          <el-button type="primary" plain @click="start" v-if="gamePaused"
            >开始游戏🎮</el-button
          >
          <el-button type="primary" plain @click="pause" v-else
            >暂停游戏🕤</el-button
          >
        </div></el-col
      >
    </el-row>
    <!--地图主体, 注意父结点必须是relative, 子结点必须是absolute-->
    <div
      :style="{
        width: $store.getters.mapWidth + 'px',
        height: $store.getters.mapHeight + 'px',
        backgroundColor: $store.state.map.color,
        borderWidth: $store.getters.borderWidth + 'px',
        borderStyle: $store.state.map.border.style,
        borderColor: $store.getters.borderColor,
        position: 'relative',
        margin: '0 auto',
      }"
    >
      <!-- 蛇 -->
      <div v-for="part in $store.state.snake.body">
        <div
          :style="{
            width: $store.state.width + 'px',
            height: $store.state.height + 'px',
            backgroundColor: $store.getters.snakeColor,
            borderRadius: '30%',
            position: 'absolute',
            left: part.x * $store.state.width + 'px',
            top: part.y * $store.state.height + 'px',
          }"
        ></div>
      </div>

      <!-- 食物 -->
      <div
        class="fader lighter"
        :style="{
          width: $store.state.width + 'px',
          height: $store.state.height + 'px',
          backgroundColor: $store.getters.foodColor,
          borderRadius: '50%',
          position: 'absolute',
          left: $store.state.food.x * $store.state.width + 'px',
          top: $store.state.food.y * $store.state.height + 'px',
        }"
      ></div>
    </div>

    <h2> 食物buff💊: 红色代表可以穿墙, 黄色代表吃到自己不会死, 白色会让游戏变慢 </h2>
  </div>
</template>

<script>
import Debugger from "@/components/Debugger.vue";
import { ElMessage } from "element-plus";
export default {
  name: "Home",
  components: {
    Debugger,
  },
  data() {
    return {
      gamePaused: true,
    };
  },
  methods: {
    init() {
      this.$store.commit("init");
      this.gamePaused = true;
    },
    start() {
      ElMessage.success({
        message: "游戏开始",
        type: "success",
      });
      this.gamePaused = false;
      this.$store.commit("start", this.loop);
    },
    pause() {
      ElMessage("游戏暂停");
      this.gamePaused = true;
      clearInterval(this.$store.state.timer);
    },
    loop() {
      //游戏主体
      console.log("一轮循环");
      this.$store.commit("updateDirection");
      this.$store.commit("moveForward"); //只处理前进, 不删除尾巴
      //如果吃到食物则不删除尾巴, 如果没吃到食物则删除尾巴
      if (
        this.$store.getters.head.x == this.$store.state.food.x &&
        this.$store.getters.head.y == this.$store.state.food.y
      ) {
        //吃到食物的处理
        console.log("吃到食物");
        this.$store.state.snake.buff = this.$store.state.food.buff; //获取buff
        this.$store.commit("updateFood"); //刷新下一个食物
      } else {
        //否则删除尾巴
        this.$store.state.snake.body.pop();
      }
      // 撞墙处理
      if (this.ifMeetWall()) {
        if (this.$store.state.snake.buff === "wall") {
          //穿墙
          this.throughWall();
        } else {
          //撞墙
          this.$store.commit("stop");
          return;
        }
      }
      // 撞自己
      if (this.ifMeetSelf()) {
        if (this.$store.state.snake.buff === "crossSelf") {
          //穿过自己
        } else {
          //吃到自己
          this.$store.commit("stop");
          return;
        }
      }
      if (this.$store.state.snake.buff === "slow") {
        this.$store.state.snake.speed = this.$store.state.initSpeed * 2;
      } else {
        this.$store.state.snake.speed = this.$store.state.initSpeed;
      }
      this.$store.commit("start", this.loop);
    },
    ifMeetLeftWall() {
      return this.$store.getters.head.x < 0;
    },
    ifMeetRightWall() {
      return this.$store.getters.head.x >= this.$store.state.map.max.x;
    },
    ifMeetDownWall() {
      return this.$store.getters.head.y >= this.$store.state.map.max.y;
    },
    ifMeetUpWall() {
      return this.$store.getters.head.y < 0;
    },
    ifMeetWall() {
      return (
        this.ifMeetLeftWall() ||
        this.ifMeetRightWall() ||
        this.ifMeetDownWall() ||
        this.ifMeetUpWall()
      );
    },
    ifMeetSelf() {
      //前4个不可能相撞
      for (var i = 4; i < this.$store.state.snake.body.length; i++) {
        let head = this.$store.getters.head;
        let part = this.$store.state.snake.body[i];
        if (head.x == part.x && head.y == part.y) {
          return true;
        }
      }
      return false;
    },
    throughWall() {
      //穿墙
      let head = this.$store.getters.head;
      if (this.ifMeetRightWall()) {
        head.x = 0;
      } else if (this.ifMeetLeftWall()) {
        head.x = this.$store.state.map.max.x - 1;
      } else if (this.ifMeetDownWall()) {
        head.y = 0;
      } else if (this.ifMeetUpWall()) {
        head.y = this.$store.state.map.max.y - 1;
      }
    },
  },
  created() {
    this.$store.commit("init");
    document.body.onkeydown = (e) => {
      this.$store.state.key = e.key;
    };
  },
};
</script>

<style>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
@keyframes fade {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes fade {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

.fader {
  color: rgb(0, 0, 0);
  animation: fade 600ms infinite;
  -webkit-animation: fade 600ms infinite;
}

@-webkit-keyframes orangellowPulse {
   from { -webkit-box-shadow: 0 0 9px #333; }
   50% { -webkit-box-shadow: 0 0 18px #ffb515; }
   to { -webkit-box-shadow: 0 0 9px #333; }
}

.lighter {
  color: rgb(255, 251, 0);
  animation: orangellowPulse 600ms infinite;
  -webkit-animation: orangellowPulse 600ms infinite;
}
</style>
